<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pull</title>
</head>
<body>
name: <input type="text" id="streamName" value="one"> <br/>

<div>
    <input type="radio" name="src_proto" value="webrtc" onchange="protoChange()" checked="checked">webrtc<br>
    <input type="radio" name="src_proto" value="rtsp" onchange="protoChange()">rtsp<br>

    <br>

    <div id="rtsp">
        <input type="radio" name="rtsp" value="sample" checked="checked">sample<br>
        <input type="radio" name="rtsp" value="rtp">rtp<br>
    </div>
</div>

<button onclick="pullStream()">PULL</button>
<br/>

<div id="remoteVideos"></div>

<div id="logs"></div>
<br/>


</body>
</html>


<script>
    let pc = new RTCPeerConnection()

    function log(msg) {
        document.getElementById('logs').innerHTML += msg + '<br>'
        console.log(msg)
    }

    pc.oniceconnectionstatechange = function () {
        log("iceConnectionState: " + pc.iceConnectionState)
    }

    pc.onicecandidate = function (event) {
        if (event.candidate != null) {
            log("candidate: " + JSON.stringify(event.candidate))
        }
    }

    pc.ontrack = function (event) {
        let el = document.createElement(event.track.kind)
        el.srcObject = event.streams[0]
        el.autoplay = true
        el.controls = false
        el.width = 640
        el.height = 480

        document.getElementById('remoteVideos').appendChild(el)
    }


    function pullStream() {
        let streamName = document.getElementById("streamName").value;
        let protocol = "ws://"
        if (window.location.protocol === "https:") {
            protocol = "wss://"
        }
        let wsURL = protocol + window.location.hostname + ":" + window.location.port + "/ws/pull/tina";

        let ws = new WebSocket(wsURL)
        ws.onopen = (e) => {
            console.log(e)

            pc.createOffer({
                offerToReceiveVideo: true,
                iceRestart: true,
            }).then(offer => {
                pc.setLocalDescription(offer)

                console.log('请求offer: ', offer)
                let data = {
                    name: streamName,
                    rtsp: false,
                    sample: false,
                    offer: offer
                }

                let value = getRadioBoxValue("src_proto")
                if (value === "rtsp") {
                    data.rtsp = true

                    let value = getRadioBoxValue("rtsp")
                    if (value === "sample") {
                        data.sample = true
                    }
                }

                log("rtsp: " + data.rtsp + ", sample: " + data.sample)

                ws.send(JSON.stringify({
                    method: "offer",
                    offer: data,
                }))
            })
                .catch(function (e) {
                    log(e)
                })
        }
        ws.onclose = (e) => {
            console.log(e)
        }
        ws.onerror = (e) => {
            console.log(e)
        }
        ws.onmessage = (e) => {
            log(JSON.stringify(e.data))

            let object = JSON.parse(e.data)
            if (object.answer.code === 0) {
                pc.setRemoteDescription(object.answer.answer)
            }
        }
    }

</script>


<script>
    function getRadioBoxValue(radioName) {
        let obj = document.getElementsByName(radioName); //这个是以标签的name来取控件
        for (let i = 0; i < obj.length; i++) {
            if (obj[i].checked) {
                return obj[i].value;
            }
        }
        return "undefined";
    }

    document.getElementById("rtsp").hidden = true
    
    function protoChange() {
        let value = getRadioBoxValue("src_proto")
        if (value === "rtsp") {
            document.getElementById("rtsp").hidden = false
        } else {
            document.getElementById("rtsp").hidden = true
        }
    }

</script>